<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子产品 | 售后</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header {
            width: 1250px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .h-container {
            height: 100%;
            width: 323px;
            background-color: #ffc42a;
            transform: skewX(-20deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h-container .hc-c {
            display: flex;
            transform: skewX(20deg);
            font-size: 12px;
        }

        .h-container .hc-c p {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .hc-c .h-c-img {
            width: 15px;
        }

        .header-nav {
            width: 1250px;
            font: 14px;
            color: #fff;
            background-size: 2px 100%;
            background-color: #2e2e2e;
            display: flex;
        }

        .header-nav p {
            height: 66px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            line-height: 66px;
        }

        .header-nav p:first-child {
            padding-left: 0px;
        }

        .header-nav p:hover {
            color: #ffc42a;
        }

        .header-tabs {
            height: 60px;
            line-height: 60px;
            font-size: 12px;
        }

        .container {
            width: 1250px;
            height: 867px;
            display: flex;
            box-sizing: border-box;
            overflow: hidden;
            justify-content: space-between;
            padding-top: 100px;
        }

        .container .order {
            width: 100%;
        }

        .container .order .order-title {
            font-size: 24px;
            font-weight: bold;
            color: #555555;
            padding-bottom: 10px;
        }

        .order .order-con .p-1 {
            font-size: 16px;
            font-weight: bold;
            color: #555555;
            border-color: #dddddd;
            padding-top: 4px;
            padding-bottom: 4px;
            padding-left: 12px;
            padding-right: 12px;
            border-bottom: 3px solid #eee;
        }

        .order .order-con .p-2 {
            font-size: 14px;
            font-weight: bold;
            color: #777777;
            border-color: #dddddd;
            padding-top: 8px;
            padding-bottom: 40px;
            padding-left: 8px;
            padding-right: 8px;
        }

        .order .order-con .p-3 {
            font-size: 16px;
            font-weight: normal;
            color: #777777;
        }

        .container .order p span {
            display: inline-block;
            width: 180px;
        }

        .m-20 {
            margin-top: 20px;
            margin-bottom: 40px;
        }

        .or-detail {
            font-size: 16px;
            font-weight: bold;
            color: #555555;
            border-color: #dddddd;
        }

        .fw-normal {
            font-weight: normal;
        }

        .or-detail p {
            height: 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            border-bottom: 1px solid #d6d6d6;
        }

        .or-detail p:nth-child(1) {
            border-bottom-width: 3px;
        }

        .or-detail p:nth-child(3) {
            border-bottom-style: dashed;
        }

        .or-detail p:last-child {
            border-bottom-width: 0;
            margin-bottom: 20px;
        }

        .user-detail p {
            height: 35px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border-bottom: 1px dashed #d6d6d6;
        }

        .user-detail p span:first-child {
            width: 370px;
        }

        .user-detail .ud-p-1 {
            border-bottom-width: 0;
        }

        .user-detail .ud-p-2 {
            height: 18px;
            border-bottom-width: 0;
            font-size: 13px;
            font-weight: normal;
            color: #777777;
        }

        .btns {
            display: flex;
            justify-content: flex-end;
        }

        .btns .btn {
            font-size: 15px;
            font-weight: normal;
            color: #ffffff;
            border-color: #ffc42a;
            background-color: #ffc42a;
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 40px;
            padding-right: 40px;
            background-image: none;
            margin-right: 20px;
        }

        .btns .btn:hover {
            background-color: #a3905f;
        }

        .footer {
            height: 336px;
            background-color: #f7f7f7;
            padding-top: 150px;
            padding-bottom: 150px;
            box-sizing: border-box;
        }

        .footer {
            width: 1250px;
            display: flex;
            justify-content: space-between;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .f-top {
            margin-bottom: 20px;
        }

        .footer-1 .f-title {
            font-size: 24px;
            font-weight: 500;
            color: #000;
        }

        .footer-1 .f-content {
            font-size: 15px;
            color: #555555;
            margin-top: 20px;
        }

        .f-content p {
            margin-bottom: 10px;
        }

        .f-content2 {
            height: 90px;
            display: flex;
            align-items: center;
        }

        .f-content2 textarea {
            height: 100%;
        }

        .f-content2 button {
            height: 100%;
            background-color: #ffc42a;
            margin-left: 20px;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
        }

        .color-1 {
            background-color: #f7f7f7;
        }

        .color-2 {
            background-color: #2e2e2e;
        }

        .color-3 {
            background-image: linear-gradient(to right, #fff, #f4f8fb);
        }
    </style>
    <!-- 引入动画库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<body>
    <div class="box">
        <div class="header">
            <a href="../pages/Neast163.html">
                <img src="../images/logo.png" alt="" class="logo"></a>
            <div class="h-container">
                <div class="hc-c">
                    <a href="" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img01.png" alt=""> 个人中心
                    </a>
                    <a href="../pages/Neaste163.html" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img02.png" alt=""> 退出登录
                    </a>
                    <a href="../pages/NeastShopping.html">
                        <img class="h-c-img" src="../images/img03.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="box color-2">
        <div class="header-nav">
            <p><a href="../pages/Neast163.html" style="color: #fff;text-decoration:none;">首页</a></p>
            <p><a href="../pages/inde.html" style="color: #fff;text-decoration:none;">关于</a></p>
            <p><a href="../pages/faqa.html" style="color: #fff;text-decoration:none;">FAQ</a></p>
            <p><a href="../pages/NeasteAftershop.html" style="color: #fff;text-decoration:none;">售后</a></p>
            <p><a href="../pages/sugges.html" style="color: #fff;text-decoration:none;">联系</a></p>
        </div>
    </div>

    <div class="box color-3">
        <div class="container">
            <div class="order">
                <h2 class="order-title">谢谢。您的订单已收到。</h2>
                <div class="order-con">
                    <p class="p-1">
                        <span>订单：</span>
                        <span>日期：</span>
                        <span>总计：</span>
                        <span>付款方式：</span>
                    </p>
                    <p class="p-2">
                        <span>#35991</span>
                        <span>2022-06-14</span>
                        <span>¥ 89.00</span>
                        <span>银行汇款（线下）</span>
                    </p>
                    <p class="p-3">直接付款到我们的银行账户。请使用订单号作为付款名目。我们会在资金到账后配送订单。</p>
                </div>
                <h2 class="order-title m-20">我们的银行账户详情</h2>
                <h2 class="order-title ">订单详情</h2>
                <div class="or-detail">
                    <p><span>商品</span><span>合计</span></p>
                    <p class="fw-normal"><span>迷你蓝牙耳机 × 1</span><span>¥ 89.00</span></p>
                    <p><span>购物小计：</span><span class="fw-normal">¥ 89.00</span></p>
                    <p><span>配送:</span><span class="fw-normal">免费送货</span></p>
                    <p><span>订单合计：</span><span>¥ 89.00</span></p>
                </div>
                <h2 class="order-title ">客户详情</h2>
                <div class="user-detail">
                    <p><span>电话：</span><span class="fw-normal">121321321</span></p>
                    <p class="ud-p-1">账单地址</p>
                    <p class="ud-p-2">福建省莆田市</p>
                    <p class="ud-p-2">小明</p>
                    <p class="ud-p-2">123456789</p>
                </div>
                <div class="btns">
                    <div class="btn">付款</div>
                    <div class="btn">取消</div>
                    <div class="btn">返回</div>
                </div>
            </div>
        </div>
    </div>
    <div class="box color-1">
        <div class="footer">
            <div class="footer-1">
                <div class="f-top">
                    <p class="f-title">
                        Contact
                    </p>
                    <p class="f-content">
                        地址：江苏省苏州市工业园区中新大道西加成大厦
                    </p>
                </div>
                <div class="f-bottom">
                    <p class="f-title">
                        +86 123 1234 1234
                    </p>
                    <p class="f-content">
                        邮箱：qifeiye@admin.com
                    </p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Quick Links
                </p>
                <div class="f-content">
                    <p>常见问题</p>
                    <p>测评中心</p>
                    <p>保修政策</p>
                    <p>售后服务</p>
                    <p>售后服务</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Products
                </p>
                <div class="f-content">
                    <p>充电</p>
                    <p>手机</p>
                    <p>生活</p>
                    <p>配件</p>
                    <p>音乐</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Feedback
                </p>
                <div class="f-content f-content2">
                    <textarea placeholder="内容" name="" id="idea" cols="50" rows="5"></textarea>
                    <button onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <script>
    </script>
</body>

</html>